import React, { useEffect, useState } from 'react';
import {useDispatch,useSelector} from 'react-redux';
import {create_user_register} from '../../store/actionCreators/index'
import './register.scss';
import {  role_list } from '../../api/login/login';
import { Button, notification } from 'antd';
import { useNavigate } from 'react-router-dom';
const Register = () => {
    let navigate = useNavigate();
    let dispatch = useDispatch();
    
    // 双向绑定输入框的value
    const [stateValue, setStateValue] = useState({
        user: '',
        nickname: '',
        name: '',
        phone: '',
        mail: '',
        pass: '',
        role: '',
        permissions: []
    })
    // 获取角色列表
    let [roleList, setRoleList] = useState({});
    useEffect(() => {
        role_list().then((res) => {
            stateValue.role = res.data.list[0].value;//初始化渲染role为空，
            stateValue.permissions = res.data.list[0].permissions;//初始化permissions，
            setStateValue({ ...stateValue });

            setRoleList(res.data);
            localStorage.setItem('roleList', JSON.stringify(res.data));
        })
    }, [])
    const inputValue = (e) => {
        // 动态添加输入框的值到对象中
        stateValue[e.target.name] = e.target.value;
        if (stateValue.role == roleList.list[0].value) {
            stateValue.permissions = roleList.list[0].permissions;
            setStateValue({ ...stateValue })
        } else if (stateValue.role == roleList.list[1].value) {
            stateValue.permissions = roleList.list[1].permissions;
            setStateValue({ ...stateValue })
        }
    }

    // 注册
    let userList = useSelector((state)=>state.userinfo.userList);
    function handleRes() {
        if (stateValue.user == false) {
            notification.error({ message: '请输入账号!' });
        } else if (stateValue.nickname == false) {
            notification.error({ message: '请输入昵称!' });
        } else if (stateValue.name == false) {
            notification.error({ message: '请输入姓名' });
        } else if (/^1[3-9]\d{9}$/.test(stateValue.phone) == false) {
            notification.error({ message: '请输入正确的手机号!' });
        } else if (stateValue.mail == false) {
            notification.error({ message: '请输入邮箱!' });
        } else if (stateValue.pass == false) {
            notification.error({ message: '请输入密码!' });
        }
        else {
            // 判断账号是否存在
            let i = userList.findIndex((item)=>{
                return item.phone == stateValue.phone;
            });
            if(i == -1){
                dispatch(create_user_register(stateValue));
                notification.success({ message: '注册成功' });
                navigate('/login');
            }else{
                notification.error({ message: '账号以存在!' });
            }
            
        }
    }
    // 去登录
    function golog() {
        navigate('/login');
    }
    return (
        <div className='register'>
            <div className="input-reg">
                <div className="user-in">
                    <input type="text" name='user' placeholder='请输入账号' onChange={(e) => inputValue(e)} value={stateValue.user} />
                </div>
                <div className="nickname">
                    <input type="text" name='nickname' placeholder='请输入昵称' onChange={(e) => inputValue(e)} value={stateValue.nickname} />
                </div>
                <div className="name">
                    <input type="text" name='name' placeholder='请输入姓名' onChange={(e) => inputValue(e)} value={stateValue.name} />
                </div>
                <div className="phone">
                    <input type="text" name='phone' placeholder='请输入手机号' onChange={(e) => inputValue(e)} value={stateValue.phone} />
                </div>
                <div className="mail">
                    <input type="text" name='mail' placeholder='请输入邮箱' onChange={(e) => inputValue(e)} value={stateValue.mail} />
                </div>
                <div className="pass">
                    <input type="password" name='pass' placeholder='请输入密码' onChange={(e) => inputValue(e)} value={stateValue.pass} />
                </div>
                <div className="role">
                    <select name="role" onChange={(e) => inputValue(e)} value={stateValue.role}>
                        {
                            roleList.list ? roleList.list.map((item, index) => {
                                return (
                                    <option value={item.value} key={index}>{item.label}</option>
                                )
                            }) : ''
                        }
                    </select>
                </div>
                <div className="go-res" onClick={handleRes} >注册</div>
                <Button type="primary" onClick={golog} className='log'>直接登录</Button>
            </div>

        </div>
    );
}
export default Register;
